//------------------------------ 图表 -------------------------------
/**--------------------------------------- 总统计 -------------------------------------*/
function chart_all(data_list, start_day) {
    let y = start_day.split('/')[0];
    let m = start_day.split('/')[1];
    let d = start_day.split('/')[2];
    // alert(y + m + d);
    // let base = new Date(2019, 9, 31);
    // let base = new Date(y, m, d);
    let base = new Date(y, m - 1, d);
    let oneDay = 24 * 3600 * 1000;
    let date = [];
    let data = data_list;
    let today = new Date();
    // alert(today.getDate());
    let daysdiff = Math.abs((today.getTime() - base.getTime()));
    let days = Math.ceil(daysdiff / oneDay) - 1;
    // alert(days);
    // alert(base);
    // alert(today.getTime());
    // let start  = new Date(base);
    // date.push([start.getFullYear(), start.getMonth(), start.getDate()].join('/'));
    // alert([start.getFullYear(), start.getMonth(), start.getDate()].join('/'));
    // date.push('2019/10/31');
    // date.push(start_day);
    let bases = base.getTime();
    // let test = new Date(bases);
    // alert(test.getDate());
    for (let i = 0; i <= days; i++) {
        let now = new Date((bases + i * oneDay));
        // let month;
        // if (i === 0) {
        let month = now.getMonth() + 1;
        // } else {
        //     month = now.getMonth() + 1;
        // }
        date.push([now.getFullYear(), month, now.getDate()].join('/'));
    }
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line',
                snap: true
            },
            position: function (pt) {
                return [pt[0], '10%'];
            }
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date
        },
        yAxis: {
            type: 'value'
        },
        dataZoom: [{
            type: 'inside',
            start: 0,
            end: 10
        }, {
            start: 0,
            end: 10,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
            }
        }],
        series: [{
            name: '黑广播数量',
            type: 'line',
            smooth: true,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
                color: 'rgb(255, 70, 131)'
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgb(255, 158, 68)'
                }, {
                    offset: 1,
                    color: 'rgb(255, 70, 131)'
                }])
            },
            data: data
        }]
    };
    let myChart = echarts.init(document.getElementById('chart_all'));
    myChart.setOption(option);
}

/**-------------------------------------- 年统计 --------------------------------------*/
var YearCount;

function chart_year(year_count) {
    let chart = echarts.init(document.getElementById('chart_year'));
    let option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}条 ({d}%)'
        },
        series: [{
            name: '黑广播占比',
            type: 'pie',
            // showSymbol:false,
            radius: '80%',
            center: ['50%', '50%'],
            data: [{
                    value: year_count[0],
                    name: '一月'
                },
                {
                    value: year_count[1],
                    name: '二月'
                },
                {
                    value: year_count[2],
                    name: '三月'
                },
                {
                    value: year_count[3],
                    name: '四月'
                },
                {
                    value: year_count[4],
                    name: '五月'
                },
                {
                    value: year_count[5],
                    name: '六月'
                },
                {
                    value: year_count[6],
                    name: '七月'
                },
                {
                    value: year_count[7],
                    name: '八月'
                },
                {
                    value: year_count[8],
                    name: '九月'
                },
                {
                    value: year_count[9],
                    name: '十月'
                },
                {
                    value: year_count[10],
                    name: '十一月'
                },
                {
                    value: year_count[11],
                    name: '十二月'
                }
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    // shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {
                show: false
            }
        }],
        color: ['#C23531', '#2F4554', '#61A0A8', '#D48265', '#91C7AE', '#749F83', '#CA8622', '#BDA29A']
    };
    chart.setOption(option);
    // cahrt2.setOption(option);
    YearCount = year_count;
}

/**细节 */
function ChartYearDetail() {
    let chart = echarts.init(document.getElementById('chart_year2'));
    let option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}条 ({d}%)'
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            data: LegendToolYear(YearCount),
            left: 2,
            top: 'auto',
            bottom: 'auto'
        },
        series: [{
            name: '黑广播占比',
            type: 'pie',
            // showSymbol:false,
            radius: '80%',
            center: ['60%', '50%'],
            data: DataToolYear(YearCount),
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    // shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {
                position: 'outside',
                formatter: '{b}:{d}'
            }
        }],
        color: ['#C23531', '#2F4554', '#61A0A8', '#D48265', '#91C7AE', '#749F83', '#CA8622', '#BDA29A']
    };
    chart.setOption(option);
}

/**工具 */
function DataToolYear(YearCount) {
    let content = [];
    for (let item in YearCount) {
        if (!YearCount.hasOwnProperty(item)) continue;
        if (YearCount[item] === 0) {} else {
            content.push({
                value: YearCount[item],
                name: String(Number(item) + 1) + '月',
                label: {
                    position: 'outside',
                    smooth: true,
                    formatter: "{b}:{d}%",
                    alignTo: 'labelLine'
                },
                labelLine: {
                    length2: 35
                }

            })
        }
    }
    return content;
}

function LegendToolYear(YearCount) {
    let content = [];
    for (let item in YearCount) {
        if (!YearCount.hasOwnProperty(item)) continue;
        content.push(String(Number(item) + 1) + '月');
    }
    return content;
}

/**-------------------------------------- 月统计 --------------------------------------*/
var MonthCount;

function chart_month(month_count) {
    let chart = echarts.init(document.getElementById('chart_month'));
    let option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}条 ({d}%)'
        },
        series: [{
            name: '黑广播占比',
            type: 'pie',
            radius: '80%',
            center: ['50%', '50%'],
            data: [{
                    value: month_count[0],
                    name: '本月1日'
                },
                {
                    value: month_count[1],
                    name: '本月2日'
                },
                {
                    value: month_count[2],
                    name: '本月3日'
                },
                {
                    value: month_count[3],
                    name: '本月4日'
                },
                {
                    value: month_count[4],
                    name: '本月5日'
                },
                {
                    value: month_count[5],
                    name: '本月6日'
                },
                {
                    value: month_count[6],
                    name: '本月7日'
                },
                {
                    value: month_count[7],
                    name: '本月8日'
                },
                {
                    value: month_count[8],
                    name: '本月9日'
                },
                {
                    value: month_count[9],
                    name: '本月10日'
                },
                {
                    value: month_count[10],
                    name: '本月11日'
                },
                {
                    value: month_count[11],
                    name: '本月12日'
                },
                {
                    value: month_count[12],
                    name: '本月13日'
                },
                {
                    value: month_count[13],
                    name: '本月14日'
                },
                {
                    value: month_count[14],
                    name: '本月15日'
                },
                {
                    value: month_count[15],
                    name: '本月16日'
                },
                {
                    value: month_count[16],
                    name: '本月17日'
                },
                {
                    value: month_count[17],
                    name: '本月18日'
                },
                {
                    value: month_count[19],
                    name: '本月19日'
                },
                {
                    value: month_count[20],
                    name: '本月20日'
                },
                {
                    value: month_count[21],
                    name: '本月21日'
                },
                {
                    value: month_count[22],
                    name: '本月22日'
                },
                {
                    value: month_count[23],
                    name: '本月23日'
                },
                {
                    value: month_count[24],
                    name: '本月24日'
                },
                {
                    value: month_count[25],
                    name: '本月25日'
                },
                {
                    value: month_count[26],
                    name: '本月26日'
                },
                {
                    value: month_count[27],
                    name: '本月27日'
                },
                {
                    value: month_count[28],
                    name: '本月28日'
                },
                {
                    value: month_count[29],
                    name: '本月29日'
                },
                {
                    value: month_count[30],
                    name: '本月30日'
                },
                {
                    value: month_count[31],
                    name: '本月31日'
                },
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {
                show: false
            }
        }],
        color: ['#C23531', '#2F4554', '#61A0A8', '#D48265', '#91C7AE', '#749F83', '#CA8622', '#BDA29A']
    };
    chart.setOption(option);
    MonthCount = month_count;
}

/**详细 */
function ChartMonthDetil() {
    let chart = echarts.init(document.getElementById('chart_month2'));
    let option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}条 ({d}%)'
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            data: LegendToolMonth(MonthCount),
            left: 2,
            top: 'auto',
            bottom: 'auto'
        },
        series: [{
            name: '黑广播占比',
            type: 'pie',
            radius: '65%',
            center: ['60%', '50%'],
            data: DataToolMonth(MonthCount),
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
        }],
        color: ['#C23531', '#2F4554', '#61A0A8', '#D48265', '#91C7AE', '#749F83', '#CA8622', '#BDA29A']
    };
    chart.setOption(option);
}

/**处理数据工具 */
function DataToolMonth(MonthCount) {
    let content = [];
    // alert(MonthCount[8]==0);
    for (let item in MonthCount) {
        if (!MonthCount.hasOwnProperty(item)) continue;
        if (MonthCount[item] === 0) {} else {
            content.push({
                value: MonthCount[item],
                name: '每月' + String(Number(item) + 1) + '日',
                label: {
                    position: 'outside',
                    smooth: true,
                    formatter: "{b}:{d}%",
                    alignTo: 'labelLine'
                },
                labelLine: {
                    length2: 35
                }
            })
        }
    }
    return content;
}

function LegendToolMonth(MonthCount) {
    let content = [];
    for (let item in MonthCount) {
        if (!MonthCount.hasOwnProperty(item)) continue;
        content.push('每月' + String(Number(item) + 1) + '日')
    }
    return content;
}

/**-------------------------------------- 日统计 --------------------------------------*/
var DayCount;

function chart_day(day_count) {
    let chart = echarts.init(document.getElementById('chart_day'));
    let option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}条 ({d}%)'
        },
        series: [{
            name: '黑广播占比',
            type: 'pie',
            radius: '80%',
            center: ['50%', '50%'],
            data: [{
                    value: day_count[0],
                    name: '00:00-01:00'
                },
                {
                    value: day_count[1],
                    name: '01:00-02:00'
                },
                {
                    value: day_count[2],
                    name: '02:00-03:00'
                },
                {
                    value: day_count[3],
                    name: '03:00-04:00'
                },
                {
                    value: day_count[4],
                    name: '04:00-05:00'
                },
                {
                    value: day_count[5],
                    name: '05:00-06:00'
                },
                {
                    value: day_count[6],
                    name: '06:00-07:00'
                },
                {
                    value: day_count[7],
                    name: '07:00-08:00'
                },
                {
                    value: day_count[8],
                    name: '08:00-09:00'
                },
                {
                    value: day_count[9],
                    name: '09:00-10:00'
                },
                {
                    value: day_count[10],
                    name: '10:00-11:00'
                },
                {
                    value: day_count[11],
                    name: '11:00-12:00'
                },
                {
                    value: day_count[12],
                    name: '12:00-13:00'
                },
                {
                    value: day_count[13],
                    name: '13:00-14:00'
                },
                {
                    value: day_count[14],
                    name: '14:00-15:00'
                },
                {
                    value: day_count[15],
                    name: '15:00-16:00'
                },
                {
                    value: day_count[16],
                    name: '16:00-17:00'
                },
                {
                    value: day_count[17],
                    name: '17:00-18:00'
                },
                {
                    value: day_count[18],
                    name: '18:00-19:00'
                },
                {
                    value: day_count[19],
                    name: '19:00-20:00'
                },
                {
                    value: day_count[20],
                    name: '20:00-21:00'
                },
                {
                    value: day_count[21],
                    name: '21:00-22:00'
                },
                {
                    value: day_count[22],
                    name: '22:00-23:00'
                },
                {
                    value: day_count[23],
                    name: '23:00-24:00'
                }
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {
                show: false
            }
        }],
        color: ['#C23531', '#2F4554', '#61A0A8', '#D48265', '#91C7AE', '#749F83', '#CA8622', '#BDA29A']
    };
    chart.setOption(option);
    DayCount = day_count;
}

/**详细 */
function ChartDayDetil() {
    let chart = echarts.init(document.getElementById('chart_day2'));
    let option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}条 ({d}%)'
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            data: LegendToolDay(DayCount),
            left: 2,
            top: 'auto',
            bottom: 'auto'
        },
        series: [{
            name: '黑广播占比',
            type: 'pie',
            radius: '80%',
            center: ['50%', '60%'],
            data: DataToolDay(DayCount),
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }],
        color: ['#C23531', '#2F4554', '#61A0A8', '#D48265', '#91C7AE', '#749F83', '#CA8622', '#BDA29A']
    };
    chart.setOption(option)
}

/**图表工具 */
function DataToolDay(DayCount) {
    let content = [];
    for (let item in DayCount) {
        if (!DayCount.hasOwnProperty(item)) continue;
        let start = item > 9 ? String(item) + ':00' : '0' + String(item) + ':00';
        let end = item + 1 > 9 ? String(Number(item) + 1) + ':00' : '0' + String(Number(item) + 1) + ':00';
        if (DayCount[item] === 0) {} else {
            content.push({
                value: DayCount[item],
                name: start + '-' + end,
                label: {
                    position: 'outside',
                    smooth: true,
                    formatter: "{b}({d}%)",
                    alignTo: 'labelLine'
                },
                labelLine: {
                    length2: 35
                }
            })
        }
    }
    return content;
}

function LegendToolDay(DayCount) {
    let content = [];
    for (let item in DayCount) {
        if (!DayCount.hasOwnProperty(item)) continue;
        let start = item > 9 ? String(item) + ':00' : '0' + String(item) + ':00';
        let end = item + 1 > 9 ? String(Number(item) + 1) + ':00' : '0' + String(Number(item) + 1) + ':00';
        content.push(start + '-' + end)
    }
    return content;
}

/**-------------------------------------- 分类统计 ------------------------------------*/
function chart_category(category) {
    let chart = echarts.init(document.getElementById('chart_category'));
    let option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}条 ({d}%)'
        },
        series: [{
            name: '黑广播占比',
            type: 'pie',
            radius: '60%',
            center: ['55%', '50%'],
            data: DataToolCategory(category),
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            // label: {
            //     show: false
            // }
        }],
        color: ['#C23531', '#2F4554', '#61A0A8', '#D48265', '#91C7AE', '#749F83', '#CA8622', '#BDA29A'],
        legend: {
            type: 'scroll',
            orient: 'vertical',
            data: '',
            left: 2,
            top: 'auto',
            bottom: 'auto'
        }
    };
    chart.setOption(option, true)
}

function DataToolCategory(category) {
    // let content = new Array;
    for (let item in category) {
        if (!category.hasOwnProperty(item)) continue;
        // alert(item);
        // alert(category[item].name);
        if (category[item].value !== 0) {

            category[item].label = {
                position: 'outside',
                smooth: true,
                formatter: '{b}({d}%)',
                alignTo: 'labelLine'
            }
            // alert(category[item].label.smooth);
        } else {
            category[item].label = {
                show: false,
                position: 'inside'
            }
        }
    }
    return category;
}

/**-------------------------------------- axios --------------------------------------*/
axios
    .get('/d/broadcast/chart')
    .then(function (response) {
        let data_list = response.data.data_list;
        let start_day = response.data.start_day;
        let year_count = response.data.year_count;
        let month_count = response.data.month_count;
        let day_count = response.data.day_count;
        let category = response.data.category;
        chart_all(data_list, start_day);
        chart_year(year_count);
        chart_month(month_count);
        chart_day(day_count);
        chart_category(category);
    });

//------------------------------------- 时间选择器 ----------------------------------------
// /**------------------------- 内容分析 -----------------------*/
/**---------- 时间选择器 ----------*/
layui.use('laydate', function () {
    let laydate = layui.laydate;
    //执行一个laydate实例
    laydate.render({
        elem: '#test3', //指定元素
        theme: '#337AB7',
        type: 'datetime'
    });
});
/**---------- 时间选择器 ----------*/
layui.use('laydate', function () {
    let laydate = layui.laydate;
    //执行一个laydate实例
    laydate.render({
        elem: '#test4', //指定元素
        theme: '#337AB7',
        type: 'datetime'
    });
});
/**---------- 内容分析 表单 ----------*/
layui.use('form', function () {
    let form = layui.form;
    //监听提交
    form.on('submit(formDemo1)', function () {
        axios
            .post('/d/broadcast/chart', msg)
            .then(function (response) {
                let category = response.data.category;
                chart_category(category);
            });
        return false;
    });
});
/**---------- 内容分析 表单 ----------*/
layui.use(['form', 'layer'], function () {
    let form = layui.form;

    //监听提交
    form.on('submit(formDemo2)', function (data) {
        let msg = JSON.stringify(data.field);
        // console.log(msg);
        // alert(msg);
        axios
            .post('/d/broadcast/chart', msg)
            .then(function (response) {
                layer.alert('数据更新成功');
                let category = response.data.category;
                chart_category(category);
            });
        // axios
        //     .post('/d',msg)
        // document.getElementById
        return false;
    });
});
/**---------- 时间选择器 ----------*/
var start;
var end;

axios.get('/d/control/timeinfo')
    .then(function (response) {
        let diff = response.data.diff;
        // let startdate = data['startday'];
        // let diff = data['diff'];
        layui.use('slider', function () {
            let slider = layui.slider;
            //渲染
            let max = diff;
            slider.render({
                elem: '#slideTest1', //绑定元素,
                type: 'vertical',
                range: true,
                height: 380,
                max: max,
                value: [0, max],
                setTips: function (value) {
                    return getDay(max - value);
                },
                change: function (value) {
                    $('#text1').html('结束日期: ' + getDay(max - value[1]));
                    $('#text2').html('开始日期: ' + getDay(max - value[0]));
                    end = getDay(max - value[1]);
                    start = getDay(max - value[0]);
                    // alert(start);
                }
            });
        });
    });

//获得多少天之前的日期 列如2018-01-01
function getDay(day) {
    // let today = new Date(2018, 12, 1);
    let today = new Date();
    let targetday_milliseconds = today.getTime() - 1000 * 60 * 60 * 24 * day;
    today.setTime(targetday_milliseconds); //注意，这行是关键代码
    let tYear = today.getFullYear();
    let tMonth = today.getMonth();
    let tDate = today.getDate();
    tMonth = tMonth + 1;
    return tYear + "/" + tMonth + "/" + tDate;
}


var btn = document.getElementById('sub');
// start = start.innerHTML;
// end = end.innerHTML;
btn.onclick = function () {
    let params = {
        's_time': start,
        'e_time': end
    };
    // console.log(params);
    // alert(params.start);
    axios
        .post('/d/broadcast/heat', params)
        .then(function (response) {
            let location_list = response.data.ret;
            // layer.alert(location_list.length);
            heatdata = [];

            for (let item in location_list) {
                if (!location_list.hasOwnProperty(item)) continue;
                let location = location_list[item].split(',');
                heatdata.push({
                    lng: location[0],
                    lat: location[1],
                    count: 10
                })
            }
            // alert(heatdata);
            // layer.setData(heatdata);
            ResetHeat();
            layer.alert('更新成功');
        })
};
axios
    .get('/d/broadcast/heat')
    .then(function (response) {
        let location_list = response.data.location_list;
        // alert(location_list.length);
        // heatdata = [];
        // alert(location_list);

        for (let item in location_list) {
            if (!location_list.hasOwnProperty(item)) continue;
            let location = location_list[item].split(',');
            heatdata.push({
                lng: location[0],
                lat: location[1],
                count: 10
            });
            // alert(he)
        }
        // alert(heatdata);
        // layer.setData(heatdata);
        ResetHeat();
        // layer.alert('更新成功');
    });
//----------------------------------------------- 图表细节 ---------------------------------
let year_detil = document.getElementById('year_detil');
let month_detil = document.getElementById('month_detil');
let day_detil = document.getElementById('day_detil');

year_detil.onclick = function () {
    layer.open({
        title: '年统计(各月份占比细节)',
        area: ['680px', '380px'],
        content: '<div id="chart_year2" class="chart"></div><script>ChartYearDetail()</script>'
    });
};
month_detil.onclick = function () {
    layer.open({
        title: '月统计(各日期占比细节)',
        area: ['880px', '520px'],
        content: '<div id="chart_month2" class="ChartDetail"></div><script>ChartMonthDetil()</script>'
    });
};
day_detil.onclick = function () {
    layer.open({
        title: '月统计(各日期占比细节)',
        area: ['880px', '520px'],
        content: '<div id="chart_day2" class="chart"></div><script>ChartDayDetil()</script>'
    });
};